<template>
    <div class="zw-login">
        <div class="bg-img">
            <img :src="BgImg" alt="" srcset="">
        </div>
        <div class="zw-login-form">
            <div class="zw-login-form__wrapper">
                <div class="title">真唯销售管理系统</div>
                <el-form ref="formRef" :model="form" :rules="rules" class="form">
                    <el-form-item prop="userName">
                        <el-input @keyup.enter="onLogin" v-model="form.userName" class="input" prefix-icon="User"
                            placeholder="请输入登录名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input @keyup.enter="onLogin" v-model="form.password" class="input" prefix-icon="Lock"
                            placeholder="请输入密码" type="password" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div class="btn-group">
                    <el-button @click="onLogin" type="primary"
                        style="width: 100%; height: 36px; line-height: 36px; font-size: 16px;">登
                        录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import BgImg from "@/assets/41070857.jpg"
import StoreManager from "@/plugins/storage";
import ApiTree from "@/server/api-tree";
import type { UserLoginVO } from "@/server/user/types";
import type { FormInstance, FormRules } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const form = ref<UserLoginVO>({
    userName: "",
    password: ""
});
const formRef = ref<FormInstance>()
const rules = reactive<FormRules<UserLoginVO>>({
    userName: [{
        required: true, message: "登录名不能为空", trigger: 'blur'
    }],
    password: [{
        required: true, message: "登录密码不能为空", trigger: 'blur'
    }]
})

const router = useRouter();
const onLogin = async () => {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            const { data } = await ApiTree.user.login(form.value);
            if (data) {
                const { jwt, user, menuAuth } = data;
                StoreManager.set("access-token", jwt);
                StoreManager.set("user", user);
                StoreManager.set("menuAuth", menuAuth);
                router.push({ path: "/" })
            }
        }
    })
}
</script>
<style lang="scss" scope>
.zw-login {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;

    .bg-img {
        flex: 1;
        overflow: hidden;

        /* 防止图片溢出 */
        img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
    }

    &-form {
        width: 320px;
        display: flex;
        justify-content: center;
        align-items: center;

        &__wrapper {
            width: 280px;
            display: flex;
            flex-direction: column;

            .title {
                font-size: 20px;
                font-weight: 600;
                height: 36px;
                line-height: 36px;
                margin: 8px 0px;
                text-align: center;
            }

            .input {
                height: 36px;
                line-height: 36px;
            }
        }
    }
}
</style>